<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { computed, onMounted, ref, watch, provide } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const isLoggedIn = ref(false)
const username = ref('')
const userRole = ref('')

// 计算属性：是否是登录页
const isLoginPage = computed(() => {
  return route.path === '/login'
})

// 检查登录状态
onMounted(() => {
  checkLoginStatus()
  updateBodyClass()
})

// 监听路由变化，更新body类名
watch(() => route.path, () => {
  updateBodyClass()
})

// 监听登录状态变化
watch(isLoggedIn, (newVal) => {
  console.log('登录状态变化:', newVal)
})

const updateBodyClass = () => {
  if (isLoginPage.value) {
    document.body.classList.add('login-page')
  } else {
    document.body.classList.remove('login-page')
  }
}

const checkLoginStatus = () => {
  isLoggedIn.value = localStorage.getItem('isLoggedIn') === 'true'
  if (isLoggedIn.value) {
    username.value = localStorage.getItem('username') || ''
    userRole.value = localStorage.getItem('userRole') || ''
  }
}

// 更新登录状态的方法，提供给子组件使用
const updateLoginState = (loggedIn, name, role) => {
  console.log('更新登录状态:', loggedIn, name, role)
  isLoggedIn.value = loggedIn
  if (loggedIn) {
    username.value = name
    userRole.value = role
  } else {
    username.value = ''
    userRole.value = ''
  }
}

// 提供更新状态方法给子组件
provide('updateLoginState', updateLoginState)
</script>

<template>
  <div :class="['app-container', {'login-layout': isLoginPage}]">
   

    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style>
/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 设置所有页面组件的根元素样式 */
.el-card, .upload-container, .container {
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.login-page {
  overflow: hidden;
}
</style>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  width: 100%;
}

.app-container.login-layout {
  padding: 0;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

.main-content {
  margin-top: 0;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  /* max-width: none !important; 明确禁用最大宽度限制 */
}

.main-content.login-content {
  padding: 0;
  height: 100vh;
  overflow: hidden;
}


</style>
